<template>
  <div class="details" style="padding: 1.25rem;">
    <div class="top">
        <span @click="fun()" >＜</span>
        <!-- <span >{{this.$route.params.chatrouter.jobname}}</span> -->
    </div>
    <div class="toptwo">
        <div class="up">
            <b>{{this.$route.params.chatrouter.jobone}}</b>
            <span>{{this.$route.params.chatrouter.distance}}</span>
        </div>
        <div class="down">
                <div><van-icon name="stop-circle-o" />&nbsp; {{this.$route.params.chatrouter.address}}</div>
                <div><van-icon name="medal-o" />&nbsp;{{this.$route.params.chatrouter.experience}}</div>
                <div><van-icon name="user-o" />&nbsp;{{this.$route.params.chatrouter.education}}</div>
            </div>
            <div class="name">
               <div class="img">
                <img src="" alt="">
               </div>
                <div class="right">
                    <div class="top">
                        <b>{{this.$route.params.chatrouter.name}}</b>
                        <p @click="Router()">更多相似职位</p>
                    </div>
                    <div class="bottom">
                        {{this.$route.params.chatrouter.job}}
                    </div>
                </div>
            </div>
    </div>
    <div class="nav">
        <b>职位详情</b>
        <div>{{this.$route.params.chatrouter.duty}}</div>
    </div>
    <div class="content">
        <h5>{{this.$route.params.chatrouter.jobcontent}}</h5>
        <span>{{this.$route.params.chatrouter.jobcontentone}}</span>
        <span>{{this.$route.params.chatrouter.jobcontenttwo}}</span>
        <span>{{this.$route.params.chatrouter.jobcontentthree}}</span>
    </div>
    <div class="quirements">
        <h5>{{this.$route.params.chatrouter.Jobrequirements}}</h5>
        <span>{{this.$route.params.chatrouter.Jobrequirementsone}}</span>
        <span>{{this.$route.params.chatrouter.Jobrequirementstwo}}</span>
        <span>{{this.$route.params.chatrouter.Jobrequirementsthree}}</span>
        <span>{{this.$route.params.chatrouter.Jobrequirementsfour}}</span>
        <span>{{this.$route.params.chatrouter.Jobrequirementsfive}}</span>
        <span>{{this.$route.params.chatrouter.Jobrequirementssix}}</span>
    </div>
    <div class="place">
        <span>{{this.$route.params.chatrouter.place}}</span>
    </div>
    <div class="introduction">
        <div class="img">
            <img :src=" this.$route.params.chatrouter.img" alt="">
        </div>
        <div class="right">
            <p>{{this.$route.params.chatrouter.company}}</p>
            <p>{{this.$route.params.chatrouter.companyone}}</p>
        </div>
       
    </div>
    <div class="juli">
            <div>
                <van-icon name="wap-home-o" />
                <b>{{this.$route.params.chatrouter.jobcontent}}</b>
            </div>
            <p @click="funa()">去修改</p>
        </div>
  </div>
</template>

<script>
export default {
methods:{
    fun(){
        this.$router.go(-1)
    },
    funa(){
        this.$router.push("/address") 
    },
    Router(v){
              this.$router.push('/morejobs')
            },
}
}
</script>

<style lang="scss" scoped>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-size: 0.16rem;
}
.details{

    .top{
        height: 2.5rem;
        font-weight: 700;
        line-height:2.5rem ;
        span{
            margin-right: 1.25rem;
        }
    }
    .toptwo{
        .up{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .9375rem;
            b{
                font-size: 18px;
            }
            span{
                color: #2fb4c0;
            }
        }
        .down{
            display: flex;
            border-bottom: 1px solid #f6f6f6;
            div{
                padding: .9375rem 0;
                margin-right: .625rem;
            }
        }
        .name{
            padding: .9375rem 0 ;
            display: flex;
            border-bottom: 1px solid #f6f6f6;
            .img{
                width: 3.125rem;
                height: 3.125rem;
            }
            .right{
                display: flex;
                flex-direction: column;
                width: 16.875rem;
                .top{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
    .nav{
        height: 4.125rem;
        padding: .9375rem 0;
        b{
            font-size: 1.125rem;
        }
        div{
            height:1.25rem;
            width: 3.125rem;
            background-color: #f6f6f6;
        }
    }
    .content{
        display: flex;
        flex-direction: column;
        span{
            font-size: .875rem;
            line-height: 2.25rem;
        }
    }
    .quirements{
        display: flex;
        flex-direction: column;
        span{
            font-size: .875rem;
            line-height: 2.25rem;
        }
    }
    .place{
        border-bottom: 1px solid #f6f6f6;
        span{
            font-size: .875rem;
            line-height: 2.25rem;
        }
    }
    .introduction{
        display: flex;
        height: 3.125rem;
        padding: .9375rem 0;
        .img{
            width: 3.125rem;
            height: 3.125rem;
        }
    }
    .juli{
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        p{
            color: #22b5b1;
        }
    }

}
</style>